<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <script src="js/request.js"></script>

    <style>
        .active{
            color: #7fb80e;
        }
        audio{
            width: 90%;
            margin-left: 5%;
            position: absolute;
            bottom: 10px;
        }
        #music_list{
            width: 90%;
            padding-bottom: 10px;
            height: 95%;
            overflow: scroll
        }

        li{
            padding-top: 25px;
        }
    </style>
</head>
<body bgcolor="#FFFFFF" style="height:90%">
<ol id="music_list"></ol>
<!-- 用于显示播放手机作为服务器的音乐 -->


<audio preload="auto" height="100px" autoplay controls id="audio_view"></audio>
<script>
    const audioView = document.querySelector("#audio_view");
    const musicListView = document.querySelector("#music_list");
    let musicList = [];

    let currentPosition = 0;

    function play(e) {
        playCurrent(e.dataset.position)
    }


    function parseResult(result) {
        let json;
        if (typeof result === 'string') {
            json = JSON.parse(result);
        } else {
            json = result;
        }
        // const json = JSON.parse(result);
        musicList = json;
        let string = "";
        for (let i = 0; i<json.length; ++i) {
            string += "<li src=\""+json[i].path ;
            string += "\" onclick=\"play(this)\" data-position="+i+">"+json[i].name+"<\/li>";
        }
        musicListView.innerHTML = string;


        audioView.src = musicList[0].url;
        musicListView.childNodes[0].classList.add("active")
    }


    function playCurrent(position) {
        if (currentPosition === position) {
            return
        }

        audioView.src = musicList[position].path;


        musicListView.childNodes[currentPosition].classList.remove("active");
        currentPosition = parseInt(position);
        musicListView.childNodes[currentPosition].classList.add("active");
    }

    function playNext() {
        if (musicList.length <= (currentPosition + 1)) {
            playCurrent(0)
        } else
            playCurrent(currentPosition + 1)
    }

    audioView.onended = function(){
        playNext();
    }
</script>

<script type="text/javascript" src="http://load_star.gitee.io/htmlminifuncs/js/getrequest.js"></script>
<script type="text/javascript">
    getRequest("http://" + location.host
 + "/file/musics", "", function(res){
        // console.log(JSON.parse(res).data)
        parseResult(JSON.parse(res).data)
    })
</script>
</body>
</html>
